<template>
  <div class="music-player">
    <!-- 音频播放器 -->
    <audio ref="audio" :src="currentSong.url" @timeupdate="updateLyrics"></audio>

    <!-- 控制按钮 -->
    <div class="controls">
      <button @click="togglePlay">
        {{ isPlaying ? 'Pause' : 'Play' }}
      </button>
      <input
        type="range"
        v-model="currentTime"
        max="100"
        @input="seek"
      />
    </div>

    <!-- 歌词显示区域 -->
    <div class="lyrics-container" ref="lyricsContainer">
      <ul>
        <li
          v-for="(line, index) in lyrics"
          :key="index"
          :class="{ active: isCurrentLine(index) }"
        >
          {{ line.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const audio = ref(null); // 音频元素
    const isPlaying = ref(false); // 是否正在播放
    const currentTime = ref(0); // 当前播放时间（百分比）
    const lyricsContainer = ref(null); // 歌词容器

    // 当前歌曲数据
    const currentSong = ref({
      url: '/home/sivan/0_0/音乐/常听/贝多芬的悲伤-萧风.mp3', // 替换为你的音频文件路径
      lyrics: [
        { time: 0, text: '歌词第一行' },
        { time: 10, text: '歌词第二行' },
        { time: 20, text: '歌词第三行' },
        { time: 30, text: '歌词第四行' },
        // 添加更多歌词行
      ],
    });

    // 歌词数据
    const lyrics = computed(() => currentSong.value.lyrics);

    // 播放/暂停
    const togglePlay = () => {
      if (isPlaying.value) {
        audio.value.pause();
      } else {
        audio.value.play();
      }
      isPlaying.value = !isPlaying.value;
    };

    // 更新当前播放时间
    const updateLyrics = () => {
      const time = audio.value.currentTime;
      currentTime.value = (time / audio.value.duration) * 100;
    };

    // 跳转到指定时间
    const seek = (event) => {
      const seekTime = (event.target.value / 100) * audio.value.duration;
      audio.value.currentTime = seekTime;
    };

    // 判断当前歌词行
    const isCurrentLine = (index) => {
      const time = audio.value.currentTime;
      const line = lyrics.value[index];
      const nextLine = lyrics.value[index + 1];
      return time >= line.time && (!nextLine || time < nextLine.time);
    };

    // 监听当前歌词行变化，自动滚动
    watch(
      () => currentTime.value,
      () => {
        const activeLine = lyricsContainer.value.querySelector('.active');
        if (activeLine) {
          activeLine.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      }
    );

    /*return {
      audio,
      isPlaying,
      currentTime,
      currentSong,
      lyrics,
      lyricsContainer,
      togglePlay,
      updateLyrics,
      seek,
      isCurrentLine,
    };*/
</script>

<style scoped>
.music-player {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.controls {
  margin-bottom: 20px;
}

.lyrics-container {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 10px 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}

li.active {
  opacity: 1;
  font-weight: bold;
}
</style>
